<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="blog/index/include_blog::header"></head>
<body class="user-select">
<header class="header">
    <nav th:include="blog/index/include_blog::nav" class="navbar navbar-default" id="navbar1"
         style="opacity: 0.9;z-index: 9999;"></nav>
</header>
<section class="container" id="blogHome">
    <div class="content-wrap">
        <div class="content">
            <div id="focusslide" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner" role="listbox">
                    <div class="item" v-for="(item,index) in adList" :class="{'active': index == adindex}">
                        <a :href="item.href"  :title="item.alt">
                            <img :src="item.src" :alt="item.alt" class="img-responsive">
                        </a>
                    </div>
                </div>
                <a class="left carousel-control" href="#focusslide" role="button" data-slide="prev" rel="nofollow">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">上一个</span>
                </a>
                <a class="right carousel-control" href="#focusslide" role="button" data-slide="next" rel="nofollow">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">下一个</span>
                </a>
            </div>
            <div class="noticelist excerpt-minic-index">
                <div class="notice">
                    <ul>
                        <li v-for="item in noticeList">
                            <img src="/img/blog/bulletin.gif">
                            <a href="" :title="item.noticeTitle">{{item.noticeTitle}}</a>
                        </li>
                    </ul>
                </div>
            </div>
            <article class="excerpt-minic excerpt-minic-index" v-for="item in recommendList">
                <h2><span class="red">【推荐】</span>
                    <a  :href="['/blog/detail?cid='+item.cid]" :title="item.title">{{item.title}}</a>
                </h2>
                <p class="note">{{item.description}}</p>
            </article>
            <div class="title">
                <h3>最新发布</h3>
            </div>

            <article class="excerpt excerpt-1" v-for="item in contentList">
                <a class="focus" :href="['/blog/detail?cid='+item.cid]" :title="item.title" >
                    <img class="thumb" :src="item.images" alt="item.title"/>
                </a>
                <header>
                    <a class="cat" :href="['/blog/article/list/'+item.menuDO.menuId]" :title="item.menuDO.name">{{item.menuDO.name}}<i></i></a>
                    <h2>
                        <a :href="['/blog/detail?cid='+item.cid]" :title="item.title" >{{item.title}}</a>
                    </h2>
                </header>
                <p class="meta">
                    <time class="time"><i class="glyphicon glyphicon-time"></i> {{item.gtmCreate}}</time>
                    <span class="views"><i class="glyphicon glyphicon-eye-open"></i> {{item.hits}}</span>
                    <!--<a class="comment" :href="['/blog/detail/'+item.cid]" title="评论" ><i class="glyphicon glyphicon-comment"></i> 0</a>-->
                </p>
                <p class="note">{{item.description}}</p>
                <a class="lookAll" :href="['/blog/detail?cid='+item.cid]" title="阅读全文">阅读全文</a>
            </article>
            <div class="m-pagination">
                <div>接近于</div>
            </div>
        </div>
    </div>
    <aside class="sidebar">
        <div th:include="blog/index/include_blog::aside"></div>
    </aside>
</section>
<div th:include="blog/index/include_blog::footer"></div>
<script type="text/javascript">

    var main = new Vue({
        el: '#blogHome',
        mounted:function(){
            this.$nextTick(function () {
                this.contentView(0);
                this.recommend();
                this.noticeView();
                this.adView();
            });
        },
        data: {
            contentList:[],
            recommendList:[],
            noticeList:[],
            adList:[],
            adindex:0,
            total:0,
            pageCount:0,
            current:0,
        },
        methods: {
            contentView:function (page) {
                var _this = this;
                this.$http.get("/blog/list",{offset:page, limit:10, sort:'cid'}).then(res=>{
                    if (res.status == 200){
                        this.total = res.data.total;
                        this.pageCount = res.data.pageCount;
                        this.current = res.data.current;
                        this.contentList = res.data.rows;
                    }
                });
            },
            recommend:function () {
                this.$http.get("/blog/list",{type:1, offset:0, limit:2}).then(res=>{
                    if (res.status == 200){
                        this.recommendList = res.data.rows;
                    }
                });
            },
            noticeView:function () {
                this.$http.get("/blog/notice",{sort:'notice_update_time',offset:0, limit:3}).then(res=>{
                    if (res.status == 200){
                        this.noticeList = res.data;
                    }
                });
            },
            adView:function () {
                this.$http.get("/blog/ad",{sort:'sort_order', clog:123,offset:0, limit:5}).then(res=>{
                    if (res.status == 200){
                        this.adList = res.data;
                    }
                });
            },
            getTotal:function () {
                return this.total;
            },
            changeBgc:function(index){
                this.isSelect = index;
                $.cookie('isSelect',index);
            }
        },
    });
</script>
</body>
</html>
